<template>
<div class="article">

    <div class="imageBack"  v-if="item.direction==1">
       <img :src="item.createdCover"  class="img">
    </div>
     
     <div class="articleBox">
       <img :src="item.createdCover"  class="img">
    </div>

     <div id="Content" >
         <!-- 背景 -->
         <div class="backBox"></div>
         <!-- 时间 -->
         <div class="time flex"><img src="@/assets/default/information/Time.png" class="icon"> 发布于 {{item.createdTime}}</div>
         <!-- 标题 -->
         <h3 class="title overflow">{{item.title}}</h3>
         <!-- 详情 -->
         <div class="flex detail">
             <div class="flex"><img src="@/assets/default/information/Hot.png" class="icon"> {{item.hot || 0 }}热度</div>
             <div class="flex"><img src="@/assets/default/information/Like.png" class="icon"> {{item.extra.likecount || 0 }}点赞</div>
             <div class="flex"><img src="@/assets/default/information/Collect.png" class="icon"> {{item.extra.collectcount || 0 }}收藏</div>
         </div>
        
         <!-- 图文 -->
         <div class="content lineFeed" v-html="item.content" v-if="item.classify == 1"></div>
         <!-- 视频 -->
         <div class="content lineFeed" v-else-if="item.classify == 2">[视频]</div>
         <!-- MD -->
         <div class="content lineFeed" v-else>[MarkDown]</div>

        <!-- 标签 -->
        <div class="flag flex" >
            <button v-if="item.classify==1" class="classify">图文</button>
            <button v-else-if="item.classify==2" class="classify">视频</button>
            <button v-else-if="item.classify==3" class="classify">MarkDown</button>
            <button class="type">{{item.name}}</button>
            <button v-for="(tag,index) in item.tags" :key="index" class="hot">{{tag}}</button>
        </div>
     </div>

    <div class="imageBack"  v-if="item.direction==2">
       <img :src="item.createdCover"  class="img">
    </div>
</div>
</template>
<script>
  export default 
  {
     name :'', 
     props:['item']
  }
</script>
<style scoped lang='less'>
@media screen and (max-width: 600px) {
    .imageBack{
        display: none;
    }
    div#Content{
        width: 100%;
        color: white;
        background: rgba(0, 0, 0, 0.3);

        .time{
            color: white;
        }
    }
    div.articleBox{
        display: block;
    }
}
.articleBox{
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;

    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.imageBack{
    width: 50%;
    height: 100%;
    overflow: hidden;

    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition-duration: 0.3s;
        border-radius: 0;
   } 
}

.article:hover{
    .imageBack>img{
        transform: scale(1.2);
    }
}
// 换行
.lineFeed{ 
    word-wrap:break-word;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#Content{
    width: 50%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
    color: var(--fontColor);
    transition-duration: 0.2;

    .backBox{
        position: absolute;
        top: 0;left: 0;
        width: 100%;height: 100%;
        background: var(--GeneralBackColor-half);
        display: none;
        z-index: -1;
        transition-duration: 0.3s;
    }
   
    

    div{
        margin-bottom: 5px;
    }
    .title{
        width: 100%;
        font-size: 25px;
        font-weight: 600;
    }
    .content{
         width: 100%;   
    }
    // 标签
    .flag{
        width: calc(100% - 40px);
        box-sizing: border-box;
        justify-content: flex-start;
        position:absolute;
        bottom: 10px;

        flex-wrap: wrap;

        button{
            background: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            font-size: 15px;
            color: white;
            padding: 5px 10px;
            margin: 5px;
        }
  
    }
}
// 详情
#Content .detail{
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 20px 0;

    div{
        margin-right: 10px;
        font-size: 14px;
    }

    .icon{
        width: 20px;height: 20px;
        margin-right: 5px;
    }
}
// 时间
#Content .time{
    justify-content: flex-start;
    font-size: 12px;
    letter-spacing: 0;
    margin-bottom: 20px;
    color: var(--fontColor);

    .icon{
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }
}

</style>